<!-- Copyright 2020 The Chromium Authors
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<template>
  <div id="page-container">
    <v-dialog/>
    <div id="title-and-graph-container">
      <div
          id="title-and-metadata">
        <div
            id="title"
            class="md-headline">
          <a href="/">Clank Dependency Viewer</a>  - Class Graph
        </div>
        <div
            id="graph-metadata-info">
          <GraphMetadataInfo
              :graph-metadata="graphMetadata"/>
        </div>
      </div>
      <GraphVisualization
          :graph-update-triggers="[
            getNodeGroup,
            displaySettingsData,
          ]"
          :page-model="pageModel"
          :display-settings-data="displaySettingsData"
          :get-node-group="getNodeGroup"
          @[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
          @[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
    </div>
    <div
        id="page-sidebar"
        class="md-elevation-3">
      <MdSubheader class="sidebar-subheader">
        Node Filter
      </MdSubheader>
      <GraphFilterItems
          id="graph-filter-items"
          :node-filter-data="displaySettingsData.nodeFilterData"
          :get-display-data="filterGetDisplayData"
          @[CUSTOM_EVENTS.FILTER_DELIST]="filterDelistNode"
          @[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
          @[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"
          @[CUSTOM_EVENTS.FILTER_DELIST_UNCHECKED]="filterDelistUnchecked"/>
      <GraphFilterInput
          :node-ids="pageModel.getNodeIds()"
          :nodes-already-in-filter="
            displaySettingsData.nodeFilterData.filterList"
          :get-short-name="filterGetShortName"
          @[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
      <MdSubheader class="sidebar-subheader">
        Display Options
      </MdSubheader>
      <div id="inbound-outbound-depth-inputs">
        <NumericInput
            description="Inbound Depth"
            input-id="inbound-input"
            :input-value.sync="displaySettingsData.inboundDepth"
            :min-value="0"/>
        <NumericInput
            description="Outbound Depth"
            input-id="outbound-input"
            :input-value.sync="displaySettingsData.outboundDepth"
            :min-value="0"/>
      </div>
      <GraphDisplayPanel
          :display-settings-data="displaySettingsData"
          :display-settings-preset.sync="
            displaySettingsData.displaySettingsPreset">
        <GraphDisplaySettings
            :display-settings-data="displaySettingsData"
            @[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
        <ClassGraphHullSettings
            :selected-hull-display.sync="displaySettingsData.hullDisplay"
            @[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
      </GraphDisplayPanel>
      <MdSubheader class="sidebar-subheader">
        Node Details
      </MdSubheader>
      <GraphSelectedNodeDetails
          :selected-node-details-data="pageModel.selectedNodeDetailsData"
          @[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
          @[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode">
        <ClassDetailsPanel
            :selected-class="pageModel.selectedNodeDetailsData.selectedNode"/>
      </GraphSelectedNodeDetails>
    </div>
  </div>
</template>

<script>
import {CUSTOM_EVENTS} from '../vue_custom_events.js';
import {HullDisplay} from '../class_view_consts.js';
import {PagePathName, UrlProcessor} from '../url_processor.js';

import {ClassNode, GraphNode} from '../graph_model.js';
import {PageModel} from '../page_model.js';
import {
  ClassDisplaySettingsData,
  DisplaySettingsPreset,
} from '../display_settings_data.js';
import {parseClassGraphModelFromJson} from '../process_graph_json.js';
import {shortenPackageName, splitClassName} from '../chrome_hooks.js';

import ClassDetailsPanel from './class_details_panel.vue';
import ClassGraphHullSettings from './class_graph_hull_settings.vue';
import GraphDisplayPanel from './graph_display_panel.vue';
import GraphDisplaySettings from './graph_display_settings.vue';
import GraphFilterInput from './graph_filter_input.vue';
import GraphFilterItems from './graph_filter_items.vue';
import GraphMetadataInfo from './graph_metadata_info.vue';
import GraphSelectedNodeDetails from './graph_selected_node_details.vue';
import GraphVisualization from './graph_visualization.vue';
import NumericInput from './numeric_input.vue';

/**
 * @param {!ClassNode} node The node to get the build target of.
 * @return {?string} The build target of the node.
 */
function getNodeBuildTarget(node) {
  if (node.buildTargets.length > 0) {
    // A few classes have multiple targets, just take the first one.
    return node.buildTargets[0];
  }
  return null;
}

/**
 * @param {!ClassNode} node The node to get the Java package of.
 * @return {?string} The Java package of the node.
 */
function getNodePackageName(node) {
  return node.packageName;
}

// @vue/component
const ClassGraphPage = {
  components: {
    ClassDetailsPanel,
    ClassGraphHullSettings,
    GraphDisplayPanel,
    GraphDisplaySettings,
    GraphFilterInput,
    GraphFilterItems,
    GraphMetadataInfo,
    GraphSelectedNodeDetails,
    GraphVisualization,
    NumericInput,
  },
  props: {
    graphJson: Object,
    graphMetadata: Object,
  },

  /**
   * Various references to objects used across the entire class page.
   *
   * @typedef {object} ClassPageData
   * @property {PageModel} pageModel The data store for the page.
   * @property {!ClassDisplaySettingsData} displaySettingsData Additional data
   *   store for the graph's display settings.
   * @property {PagePathName} pagePathName The pathname for the page.
   */

  /**
   * @return {ClassPageData} The objects used throughout the page.
   */
  data: function() {
    const graphModel = parseClassGraphModelFromJson(this.graphJson);
    const pageModel = new PageModel(graphModel);
    const displaySettingsData = new ClassDisplaySettingsData();

    return {
      pageModel,
      displaySettingsData,
      pagePathName: PagePathName.CLASS,
    };
  },
  computed: {
    CUSTOM_EVENTS: () => CUSTOM_EVENTS,
    getNodeGroup: function() {
      switch (this.displaySettingsData.hullDisplay) {
        case HullDisplay.BUILD_TARGET:
          return getNodeBuildTarget;
        case HullDisplay.JAVA_PACKAGE:
          return getNodePackageName;
        default:
          return () => null;
      }
    },
  },
  watch: {
    displaySettingsData: {
      handler: function() {
        this.updateDocumentUrl();
      },
      deep: true,
    },
  },
  /**
   * Parses out data from the current URL to initialize the visualization with.
   */
  mounted: function() {
    const pageUrl = new URL(document.URL);
    const pageUrlProcessor = new UrlProcessor(pageUrl.searchParams);
    this.displaySettingsData.readUrlProcessor(pageUrlProcessor);

    if (this.displaySettingsData.nodeFilterData.filterList.length === 0) {
      // Default class to be displayed when the page is first loaded.
      [
        'org.chromium.chrome.browser.tab.TabImpl',
      ].forEach(nodeName => this.filterAddOrCheckNode(nodeName));
    }
  },
  methods: {
    displayOptionChanged: function() {
      this.displaySettingsData.displaySettingsPreset =
        DisplaySettingsPreset.CUSTOM;
    },
    updateDocumentUrl() {
      const urlProcessor = UrlProcessor.createForOutput();
      this.displaySettingsData.updateUrlProcessor(urlProcessor);

      const pageUrl = urlProcessor.getUrl(document.URL, PagePathName.CLASS);
      history.replaceState(null, '', pageUrl);
    },
    filterGetShortName: function(fullClassName) {
      const [packageName, className] = splitClassName(fullClassName);
      return `${className} (${shortenPackageName(packageName)})`;
    },
    filterGetDisplayData: function(fullClassName) {
      const [packageName, className] = splitClassName(fullClassName);
      return {
        firstLine: className,
        secondLine: shortenPackageName(packageName),
      };
    },
    filterDelistNode: function(nodeName) {
      this.displaySettingsData.nodeFilterData.delistNode(nodeName);
    },
    filterAddOrCheckNode: function(nodeName) {
      this.displaySettingsData.nodeFilterData.addOrFindNode(
          nodeName).checked = true;
    },
    filterUncheckNode: function(nodeName) {
      this.displaySettingsData.nodeFilterData.addOrFindNode(
          nodeName).checked = false;
    },
    filterCheckAll: function() {
      this.displaySettingsData.nodeFilterData.checkAll();
    },
    filterUncheckAll: function() {
      this.displaySettingsData.nodeFilterData.uncheckAll();
    },
    filterDelistUnchecked: function() {
      this.displaySettingsData.nodeFilterData.delistUnchecked();
    },
    /**
     * @param {number} depth The new inbound depth.
     */
    setInboundDepth: function(depth) {
      this.displaySettingsData.inboundDepth = depth;
    },
    /**
     * @param {number} depth The new outbound depth.
     */
    setOutboundDepth: function(depth) {
      this.displaySettingsData.outboundDepth = depth;
    },
    /**
     * @param {?GraphNode} node The selected node. May be `null`, which will
     *     reset the selection to the state with no node.
     */
    graphNodeClicked: function(node) {
      this.pageModel.selectedNodeDetailsData.selectedNode = node;
    },
    /**
     * @param {!GraphNode} node The double-clicked node.
     */
    graphNodeDoubleClicked: function(node) {
      if (node.visualizationState.selectedByFilter) {
        this.filterUncheckNode(node.id);
      } else {
        this.filterAddOrCheckNode(node.id);
      }
    },
  },
};

export default ClassGraphPage;
</script>

<style lang="scss">
@import "~vue-material/dist/theme/engine";

@include md-register-theme("default", (
  primary: #ff5252,
  accent: #ff5252,
));

@import "~vue-material/dist/theme/all";
</style>

<style scoped>

#title-and-metadata {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#title, #graph-metadata-info {
  padding: 10px;
}

#page-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

#title-and-graph-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#page-sidebar {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  overflow-y: scroll;
  padding: 0 20px 20px 20px;
  width: 30vw;
}

.sidebar-subheader {
  padding: 0;
}

#graph-filter-items {
  margin-bottom: 10px;
}

#inbound-outbound-depth-inputs {
  display: flex;
  flex-direction: row;
}

#page-controls {
  display: flex;
  flex-direction: row;
  height: 15vh;
}
</style>
